<template>
    <div>
       
        <form class="form-horizontal">
             <div class="form-group">
                  <label for="inputEmail3" class="col-sm-2 control-label"></label>
                 <div class="col-sm-10 title">
                    <span>新增用户信息</span>
                </div>
             </div>
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-10">
                <input type="text" class="form-control"  placeholder="name" v-model="addObj.name">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">电话</label>
                <div class="col-sm-10">
                <input type="text" class="form-control"  placeholder="telphone" v-model="addObj.tel">
                </div>
            </div>
             <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">所借书目</label>
                <div class="col-sm-10">
                <input type="text" class="form-control"  placeholder="bookName" v-model="addObj.bookName">
                </div>
            </div>
            <!-- <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">借书日期</label>
                <div class="col-sm-10">
                <input type="date" class="form-control"  placeholder="telphone" v-model="borrowTime">
                </div>
            </div>
             <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">应归还日期</label>
                <div class="col-sm-10">
                <input type="date" class="form-control"  placeholder="telphone" v-model="backTime">
                </div>
            </div> -->
             <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">是否VIP</label>
                <div class="col-sm-10">
                    <label class="radio-inline">
                        <input type="radio" name="Options"  value="是" v-model="addObj.isVip">是
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="Options" value="否" v-model="addObj.isVip"> 否
                    </label>
                </div>
            </div>
             <!-- <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">书籍类型</label>
                <div class="col-sm-10">
                    <label class="checkbox-inline">
                        <input type="checkbox"  value="JavaScript" v-model="addObj.type">JavaScript
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" value="Vue" v-model="addObj.type"> Vue
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" value="JQuery" v-model="addObj.type"> JQuery
                     </label>
                </div>
            </div> -->
             <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">应缴金额</label>
                <div class="col-sm-10">
                <input type="text" class="form-control"  placeholder="money" v-model="addObj.money">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                <button type="button" class="btn btn-default" @click="saveBtnClick">确定</button>
                <button type="reset" class="btn btn-default">重置</button>
                </div>
            </div>
        </form>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                addObj:{
                    name:'',
                    tel:'',
                    bookName:'',
                    // borrowTime:'',
                    // backTime:'',
                    vip:'是',
                    // type:[],
                    money:''
                }
            }
        },
        methods:{
            saveBtnClick(){
               
                let obj = JSON.parse(JSON.stringify(this.addObj))
                console.log(obj)
                this.$axios.post('http://localhost/api.php/vrouterbook',obj)
                .then( res =>{
                    // 新增成功的时候跳转后刷新页面
                    this.$router.push({
                    name:'list'
                    })
                })
                .catch( err =>{
                    console.log(err)
                })
            }
        }
    }
</script>

<style scoped>
.title{
    border-bottom: 2px solid #ccc;
    padding-bottom: 10px;
    font-size: 24px
}
</style>